<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>八里沟云生态平台</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/lodash.min.js"></script>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/soda.js"></script>
    <script src="./js/comon.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/common.css">
    <link rel="stylesheet" type="text/css" href="./css/bot.css">

</head>

<body>
    <div class="pagemain page8">
        <div class="center-main">
            <div class="page-top-tab-nav">
                <ul>
                    <li class="current"><a href="jingying-yingshou.html">营收分析</a></li>
                    <!-- <li><a href="jingying-lianyingkoudian.html">联营扣点</a></li>
                    <li><a href="jingying-wxpay.html">微信支付</a></li> -->
                </ul>
            </div>

            <div class="wtime">
                <div class="time-filter">
                    <div class="name">时间：</div>
                    <div class="inp"><input type="text" readonly="" id="tic-start"></div>
                    <div class="to">至</div>
                    <div class="inp"><input type="text" readonly="" id="tic-end"></div>
                    <div class="btn" id="search">查询</div>
                </div>
            </div>
            <div class="header">
                <div class="left">
                    <div class="left-chart">
                        <div class="chartcon c1" id="shoupiaozhonglei"></div>
                        <div class="text t1"><span id="num1"></span><span></span></div>
                        <div class="chartcon c2" id="xiaoshouqudao"></div>
                        <div class="text t2">门票收入：<span id="num2">0</span><span>元</span></div>
                    </div>
                    <ul class="full">
                        <li>
                            <div class="box b1">
                                <div class="wrap">
                                    <div class="val"><span>0</span>张</div>
                                    <div class="per"><span style="height: 80%"></span></div>
                                </div>
                            </div>
                            <div class="tbox t1">景区购票</div>
                        </li>
                        <li>
                            <div class="box b2">
                                <div class="wrap">
                                    <div class="val"><span>0</span>张</div>
                                    <div class="per"><span style="height: 80%"></span></div>
                                </div>
                            </div>
                            <div class="tbox t2">网络购票</div>
                        </li>
                    </ul>
                    <div class="profession">
                        <div class="box box1">
                            <div class="chartcon you" id="youkeleixing"></div>
                        </div>
                    </div>

                </div>
                <div class="right">
                    <div class="chartcon c3" id="stopCar"></div>
                    <div class="text t3">实时停车费收入：<span id="num3">0</span><span>元</span></div>
                    <ul class="full full-stop">
                        <li>
                            <div class="box b1">
                                <div class="wrap">
                                    <div class="val"><span class="stop">0</span>个</div>
                                    <div class="per"><span style="height: 80%"></span></div>
                                </div>
                            </div>
                            <div class="tbox t1">已使用</div>
                        </li>
                        <li>
                            <div class="box b2">
                                <div class="wrap">
                                    <div class="val"><span class="stop">0</span>个</div>
                                    <div class="per"><span style="height: 80%"></span></div>
                                </div>
                            </div>
                            <div class="tbox t2">未使用</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="leftcon">
                <div class="qing" style="margin-bottom:20px;">
                    <div class="chartcon c1" id="xiaoshouqudao2"></div>
                    <div class="text t1">门票收入：<span id="num3">0</span><span>元</span></div>
                    <div class="rate">
                        <ul class="inner">
                            <li>
                                <div class="name"><i>1</i><span>业务招待</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>2</i><span>散客</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>3</i><span>旅行社</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>4</i><span>企事业</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>

                        </ul>
                    </div>
                    <ul class="full full-ba">
                        <div class="box b1">
                            <div class="wrap">
                                <div class="val"><span>0</span>张</div>
                                <div class="per"><span style="height: 80%"></span></div>
                            </div>
                        </div>
                        <div class="tbox t1">景区购票</div>
                        <div class="box b2">
                            <div class="wrap">
                                <div class="val"><span>0</span>张</div>
                                <div class="per"><span style="height: 80%"></span></div>
                            </div>
                        </div>
                        <div class="tbox t2">网络购票</div>
                    </ul>
                    <div class="text t2">销售门票：<span id="num2">0</span><span>张</span></div>
                </div>
                <div class="qing">
                    <div class="chartcon c1" id="dongjingqudao"></div>
                    <div class="text t1">门票收入：<span id="num3">0</span><span>元</span></div>
                    <div class="rate jiu">
                        <ul class="inner">
                            <li>
                                <div class="name"><i>1</i><span>业务招待</span></div>
                                <div class="vol"><span style="width: 0%"></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>2</i><span>散客</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>3</i><span>旅行社</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>4</i><span>企事业</span></div>
                                <div class="vol"><span style="width: 0%"></span></div>
                                <div class="num">0</div>
                            </li>

                        </ul>
                    </div>
                    <ul class="full">
                        <div class="box b1">
                            <div class="wrap">
                                <div class="val"><span>0</span>张</div>
                                <div class="per"><span style="height: 80%"></span></div>
                            </div>
                        </div>
                        <div class="tbox t1">景区购票</div>
                        <div class="box b2">
                            <div class="wrap">
                                <div class="val"><span>0</span>张</div>
                                <div class="per"><span style="height: 80%"></span></div>
                            </div>
                        </div>
                        <div class="tbox t2">网络购票</div>
                    </ul>
                    <div class="text t2">销售门票：<span id="num2">0</span><span>张</span></div>
                </div>
            </div>

            <div class="right">
                <div class="park">
                    <div class="chartcon c1" id="tianjieshan"></div>
                    <div class="text t1">门票收入：<span id="num3">0</span><span>元</span></div>
                    <div class="rate tian">
                        <ul class="inner">
                            <li>
                                <div class="name"><i>1</i><span>业务招待</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>2</i><span>散客</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>3</i><span>旅行社</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>
                            <li>
                                <div class="name"><i>4</i><span>企事业</span></div>
                                <div class="vol"><span></span></div>
                                <div class="num">0</div>
                            </li>

                        </ul>
                    </div>
                    <ul class="full">
                        <div class="box b1">
                            <div class="wrap">
                                <div class="val"><span>0</span>张</div>
                                <div class="per"><span style="height: 80%"></span></div>
                            </div>
                        </div>
                        <div class="tbox t1">景区购票</div>
                        <div class="box b2">
                            <div class="wrap">
                                <div class="val"><span>0</span>张</div>
                                <div class="per"><span style="height: 80%"></span></div>
                            </div>
                        </div>
                        <div class="tbox t2">网络购票</div>
                    </ul>
                    <div class="text t2">销售门票：<span id="num2">0</span><span>张</span></div>
                </div>

                <div class="ota">
                    <div class="chartcon" id="wangluo">

                    </div>
                    <div class="text t1">网络购票数：<span id="num7">0</span><span>张</span></div>
                    <div class="chartcon c2" id="xianshang">

                    </div>
                </div>
            </div>


        </div>
    </div>

    <script src="./lib/dyw.min.js"></script>
    <script src="./lib/laydate/laydate.js"></script>
    <script src="./js/yingshou_page.js"></script>
    <!-- <script src="data/jingying_yingshou.json?callback=list"></script> -->
    <script>
        $(function () {
            var ticstart = {
                elem: '#tic-start',
                format: 'yyyy-MM-dd',
                max: 0,
                min: "2019-09-15 00:00:00",
                choose: function (datas) {
                    ticend.min = datas; //开始日选好后，重置结束日的最小日期
                }
            };
            var ticend = {
                elem: '#tic-end',
                format: 'yyyy-MM-dd',
                max: 0,
                min: "2019-09-15 00:00:00",
                choose: function (datas) {
                    ticstart.max = datas; //结束日选好后，重置开始日的最大日期
                }
            };

            laydate.render(ticstart);
            laydate.render(ticend);
            var youkeleixing = echarts.init(document.getElementById('youkeleixing'));
            var optionyoukeleixing = {
                color: ['#786588', '#ba6743', '#4c9150', '#207cb8', "#099fac"],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/> {b} : {c} ({d}%)"
                },
                series: [{
                    name: '游客类型占比',
                    type: 'pie',
                    radius: [20, 80],
                    center: ['45%', '45%'],
                    roseType: 'radius',
                    left: 6,
                    top: 30,
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '12',
                                color: '#fff'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                            value: 600,
                            name: '散客'
                        },
                        {
                            value: 500,
                            name: '网络散客'
                        },
                        {
                            value: 400,
                            name: '地接社'
                        },
                        {
                            value: 200,
                            name: '加盟商'
                        }
                        // { value: 300, name: '放行业务' },
                        // { value: 400, name: '散客(不含车)' },
                        // { value: 200, name: '协议团' },
                        // { value: 300, name: '学生团' },
                        // { value: 300, name: '韩团' },
                        // { value: 600, name: '拓展团' },
                        // { value: 100, name: '自助购票' },
                        // { value: 500, name: '网络业务' },
                        // { value: 400, name: '香客业务' },
                        // { value: 800, name: '加盟商' },
                        // { value: 100, name: '学习团' }
                    ]
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            youkeleixing.setOption(optionyoukeleixing);
            // 线上分销统计
            var xianshang = echarts.init(document.getElementById('xianshang'));
            var XianshangOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                textStyle: {
                    color: "#fff"
                },
                grid: {
                    height: '86%',
                    left: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    boundaryGap: 'none',
                    axisLine: {
                        lineStyle: {
                            color: 'none'
                        }
                    },
                    data: ['驴妈妈', '携程', '美团', '去哪儿', '蚂蜂窝']
                }],
                yAxis: [{
                    type: 'value',
                    boundaryGap: 'none',
                    axisLine: {
                        lineStyle: {
                            color: 'none'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'none'
                        }
                    }
                }],
                series: [{
                    name: '购票数量',
                    type: 'bar',
                    barWidth: 40,
                    data: [390, 280, 330, 520, 420],
                    itemStyle: {
                        normal: {
                            barBorderRadius: [4, 4, 4, 4],
                            label: {
                                show: true,
                                textStyle: {
                                    color: "#a2e9ff"
                                },
                                position: 'top'
                            },
                            color: function (params) {
                                var colorList = ['#786588', '#ba6743', '#4c9150', '#207cb8',
                                    "#099fac"
                                ];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            xianshang.setOption(XianshangOption);
            // 网络购票数
            var wangluo = echarts.init(document.getElementById('wangluo'));
            var optionWangluo = {
                color: ['#786588', '#ba6743', '#4c9150', '#207cb8', "#099fac"],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/> {b} : {c} ({d}%)"
                },
                series: [{
                    "center": [
                        "50%",
                        "50%"
                    ],
                    name: '网络购票数',
                    type: 'pie',
                    radius: [30, 65],
                    roseType: 'radius',
                    left: 6,
                    top: 30,
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '12',
                                color: '#fff'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                            value: 600,
                            name: '去那儿'
                        },
                        {
                            value: 500,
                            name: '马蜂窝'
                        },
                        {
                            value: 400,
                            name: '驴妈妈'
                        },
                        {
                            value: 200,
                            name: '美团'
                        },
                        {
                            value: 100,
                            name: '携程'
                        }
                    ]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            wangluo.setOption(optionWangluo);

        })
    </script>

</body>

</html>